<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				padding-left: 20px;
				display: inline-block;
				color: ;
			}
		</style>
	</head>
	<body>
		账号:  <input id="inp1" type="text"/>
		<div class="nav1"></div>
		<br /><br />
		密码:  <input id="inp2" type="password"/>
		<div class="nav2"></div>
		<br />
	</body>
	<script>
		var inp1 = document.getElementById("inp1");
		var inp2 = document.getElementById("inp2");
		var nav1  = document.getElementsByClassName("nav1")[0];
		var nav2  = document.getElementsByClassName("nav2")[0];
//		inp1.onfocus = function(){
//			if(this.value.length<6||this.value.length>12){
//				nav1.innerHTML="请输入6-12个字符";
//				nav1.style.color="red"
//				this.style.border="3px solid red";
//			}
//		}
//		inp1.onblur = function(){
//			if(this.value.length>=6&&this.value.length<=12){
//				nav1.innerHTML="正确";
//				nav1.style.color="green"
//				this.style.border="3px solid green";
//			}else{
//				nav1.innerHTML="请输入6-12个字符";
//				nav1.style.color="red"
//				this.style.border="3px solid red";
//			}
//			
//		}
//实时记录输入是否符合规则
		inp1.addEventListener('input', function() {
        		if (this.value.length < 6 || this.value.length > 12) {
           		 	nav1.innerHTML = "请输入6-12个字符";
           		 	nav1.style.color = "red";
            		this.style.border = "3px solid red";
       		 	}else{
            		nav1.innerHTML = "正确";
            		nav1.style.color = "green";
            		this.style.border = "3px solid green";
        		}
    	});
    	inp2.addEventListener('input',function(){
    		if(this.value.length < 6 || this.value.length > 12) {
           		 	nav2.innerHTML = "请输入6-12个字符";
           		 	nav2.style.color = "red";
            		this.style.border = "3px solid red";
       		 	}else{
            		nav2.innerHTML = "正确";
            		nav2.style.color = "green";
            		this.style.border = "3px solid green";
        		}
    	});
	</script>
</html>
